<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录页面</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/favicon.svg" >
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/reset.css"><!--重置css-->
    <link rel="stylesheet" href="/static/bootstrap/font/bootstrap-icons.css"><!--bootstrap图标库css-->
    <link rel="stylesheet" href="/static/js/message/message.css"><!--弹窗css-->
    <link rel="stylesheet" type="text/css" href="/static/css/commons.css"><!--登录注册通用css-->
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"><!--登录css-->
    <script src="/static/js/vue/vue.js"></script><!--vue.js-->
    <script src="/static/js/message/message.js"></script><!--弹窗js-->
    <script src="/static/js/axios/axios.min.js"></script><!--axios.js-->
</head>
<body>
<div id="login">
    <img class="wave" src="/static/img/bg_login.png">
    <div class="container">

        <div class="img">
            <img src="/static/img/bg_login_people.svg">
        </div>
        <div class="login-content">
            <form action="/login" method="post">

                <img src="/static/img/avatar_man.svg" style="height: 100px;cursor: pointer" @click="avatar" alt="头像">
                <h2 class="title">欢迎登陆</h2>
                <p style="color: red" th:text="${msg}"></p>
                <div class="input-div">
                    <div class="i">
                        <i class="bi bi-person-bounding-box"></i>
                    </div>
                    <div class="div">
                        <h5 class="hint">用户名</h5>
                        <input type="text" name="username" v-model.trim="username"  @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                    </div>
                </div>
                <div class="input-div pass">
                    <div class="i">
                        <i class="bi bi-shield-lock-fill"></i>
                    </div>
                    <div class="div">
                        <h5 class="hint">密码</h5>
                        <input type="password" name="password" v-model.trim="password" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                    </div>
                </div>
                <div class="input-div pass" style="width: 200px;grid-template-columns: 13% 87%;">
                    <div class="i">
                        <i class="bi bi-upc-scan"></i>
                    </div>
                    <div class="div">
                        <h5 class="hint">验证码</h5>
                        <input type="text" name="captcha" v-model.trim="captcha" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                        <img :src="captchaImgUrl" class="captcha" @click="getCaptchaImage()" alt="验证码"/>
                    </div>
                </div>
                <div class="pass">
                    <label style="cursor: pointer">
                        <input type="checkbox" name="rememberMe" value="1"><span style="color: grey;font-size: 15px">记住我</span>
                    </label>
                </div>
                <a href="/register">加入我们?</a>
                <input type="submit" class="btn" value="登 陆">
            </form>
        </div>
    </div>
</div>

<script>
    let login = new Vue({
        el : '#login',
        data : {
            username : 'admin',
            password : 'admin',
            captcha : '',
            captchaImgUrl : '',
            flag : false,
        },
        methods : {
            avatar(){
                Qmsg.success("别点了！快快登录吧~",{position:'center'});
            },
            add(el){
                let parent = el.parentNode.parentNode;
                parent.classList.add("focus");
            },
            remove(el){
                let parent = el.parentNode.parentNode;
                if(el.value === ""){
                    parent.classList.remove("focus");
                }
            },
            getCaptchaImage(){
                    axios.get('/captcha',{responseType: 'arraybuffer'})
                    .then( (response) => {
                        this.captchaImgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
                        console.log(this.captchaImgUrl)
                    })
                    .catch( (error) => {
                        console.log(error);
                    });
            },
        },
        beforeMount (){//页面挂载之前
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                position:'center',
                autoClose:true
            })
        },
        mounted(){//页面挂载之后
            this.getCaptchaImage()
        },
    });

</script>

</body>
</html>
